<template>
  <div>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="年级">
        <nice-select
          v-model="search.grade"
          placeholder="请选择年级"
          clearable
          :options="selectArr.grade"
        ></nice-select>
      </el-form-item>
      <el-form-item label="科目">
        <nice-select
          v-model="search.subject"
          placeholder="请选择科目"
          clearable
          :options="selectArr.subject"
        ></nice-select>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-select
          v-model="search.name"
          filterable
          remote
          reserve-keyword
          placeholder="请输入课程名称"
          :remote-method="remoteMethod"
          :loading="loading"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主讲老师">
        <nice-select
          v-model="search.teacher"
          placeholder="请选择主讲老师"
          clearable
          :options="lecturerList"
        ></nice-select>
      </el-form-item>
      <el-form-item label="课程状态">
        <nice-select
          v-model="search.status"
          placeholder="请选择课程状态"
          clearable
          :options="statusOptions"
        ></nice-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="small"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <nice-table
      :data="list"
      :showIndex="true"
      :columns="columns"
      :pagination="pagination"
    >
      <el-table-column
        label="分班规则"
        align="center"
        width="200"
        slot="opreation"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.rule }}</span>
          <el-button size="small" type="text" @click="edit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </nice-table>
    <edit-course
      v-if="updateCourseDialog"
      ref="updateCourse"
      @refreshDataList="getDataList"
    ></edit-course>
  </div>
</template>
<script>
import base from '@/views/base.vue'
import EditCourse from './edit-course'
import {
  queyEnumByTableName,
  cascadeQuery,
  queryStaffListByType
} from '@/api/api.js'
import { getAllCourse } from '@/api/user.js'
export default {
  name: 'course-students',
  extends: base,
  components: {
    EditCourse
  },
  data () {
    return {
      loading: false,
      statusOptions: [
        { label: '待发布', value: 0 },
        { label: '已发布', value: 1 },
        { label: '已关闭', value: 2 }
      ],
      search: {
        grade: '', // 年级
        subject: '', // 科目
        name: '', // 课程名称
        status: '', // 课程状态
        teacher: ''
      },
      selectArr: {
        type: [], // 课程分类
        grade: [], // 课程所属年级
        subject: [], // 课程科目
        version: [], // 课程所属的教材版本
        status: [] // 课程状态
      },
      options: [],
      lecturerList: [],
      updateCourseDialog: false,
      list: [],
      columns: [
        {
          label: '课程名称',
          prop: 'name'
        },
        {
          label: '主讲老师',
          prop: 'allteachers'
        },
        {
          label: '总期次',
          prop: 'totalperiod',
          extends: [
            {
              clickFunction: val => {
                this.viewPeriod(val)
              }
            }
          ]
        },
        {
          label: '课程状态',
          prop: 'status',
          extends: [
            {
              filterFunction: val => {
                return this.$filterEnums(val, this.statusOptions)
              }
            }
          ]
        },
        {
          label: '课时数量',
          prop: 'totallessonnum'
        },
        {
          label: '班级数量',
          prop: 'classnum'
        },
        {
          label: '学生总数',
          prop: 'studentnum'
        }
      ],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        handleCurrentChange: this.handleCurrentChange,
        handleSizeChange: this.handleSizeChange
      }
    }
  },
  activated () {
    this.getDataList()
    this.queyEnumByTableName()
    this.queryStaffListByType()
  },
  methods: {
    async getDataList () {
      let res = await cascadeQuery({
        table_name: 'nice_course',
        condition: {
          subject: this.search.subject,
          grade: this.search.grade,
          status: this.search.status,
          'nice_course_nice_course_period.teacher': this.search.teacher,
          id: this.search.name
        },
        by_order: 'create_time desc',
        member: 'totalperiod,totallessonnum,classnum,studentnum,allteachers',
        by_page: {
          currPage: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        }
      })
      if (res[0]) {
        return
      }
      let data = res[1]
      if (data && data.code === 0) {
        if (data.data) {
          this.pagination.total = data.data.totalCount
          this.list = data.data.list
        }
      }
    },
    async queryStaffListByType () {
      let res = await queryStaffListByType({ 'sys_user.user_type': '3' })
      if (res[0]) {
        return
      }
      let data = res[1]
      if (data && data.code === 0) {
        this.lecturerList = data.data.list.map(ele => {
          return {
            label: ele.name,
            value: ele.user_id
          }
        })
      } else {
        this.$message.error(data.msg)
      }
    },
    async remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        let res = await getAllCourse({ 'nice_course.name': query })
        if (res[0]) {
          return
        }
        let data = res[1]
        this.loading = false
        if (data && data.code === 0) {
          if (data.data.pageList.list && data.data.pageList.list.length) {
            this.options = data.data.pageList.list.map(item => {
              return {
                label: item.name,
                value: item.id
              }
            })
          } else {
            this.options = []
          }
        }
      }
    },
    async queyEnumByTableName () {
      let res = await queyEnumByTableName({ tableName: 'nice_course' })
      if (res[0]) {
        return
      }
      let arr = res[1].data
      Object.keys(this.selectArr).forEach(item => {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].fieldName === item) {
            this.selectArr[item] = arr[i].child
          }
        }
      })
      this.selectArr = JSON.parse(
        JSON.stringify(this.selectArr)
          .split('display_value')
          .join('label')
          .split('child')
          .join('children')
          .split('t_id')
          .join('value')
      )
    },
    onSubmit () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getDataList()
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getDataList()
    },
    viewPeriod (row) {
      if (row.totalperiod) {
        this.$router.push({
          name: 'period-students',
          params: { id: row.id }
        })
      }
    },
    edit (row) {
      this.updateCourseDialog = true
      this.$nextTick(() => {
        this.$refs.updateCourse.init(row)
      })
    }
  }
}
</script>
